<div class="wrap-imagebox">
	<div class="sort-product">
		<ul class="icons">
			<li>
				<img src="${request.contextPath}/search/images/icons/list-1.png" alt="">
			</li>
			<li>
				<img src="${request.contextPath}/search/images/icons/list-2.png" alt="">
			</li>
		</ul>
		<div class="sort">
			<div class="popularity">
				<select id="select_popularity">
					<option value="1">时间倒序</option>
					<option value="2">时间正序</option>
					<option value="3">价格倒叙</option>
					<option value="4">价格正序</option>
				</select>
			</div>
			<div class="showed">
				<select id="select_page_showed">
					<option value="9">每页9条</option>
					<option value="15">每页15条</option>
					<option value="21">每页21条</option>
					<option value="30">每页30条</option>
				</select>
			</div>
		</div>
		<div class="clearfix"></div>
	</div>
	<div class="tab-product">
	
		<div class="row sort-box" id="item_container_1"></div>
		<div class="sort-box" id="item_container_2"></div>
		
	</div>
</div><!-- /.wrap-imagebox -->

<div>
	<ul class="pagination"></ul>
</div>

<script id="item_template_1" type="text/html">
		{{each $data as item i}}
			<div class="col-lg-4 col-sm-6">
				<div class="product-box">
					<div class="imagebox">
						<div class="box-image owl-carousel-1">
							<a href="${request.contextPath}/item/{{item.code}}" title="" target="_blank" >
								<img src="${nginxImage}{{item.image}}" alt="">
							</a>
						</div>
						<div class="box-content">
							<div class="cat-name">
								<a href="javascript:;" title="">{{item.categoryName}}</a>
							</div>
							<div class="product-name">
								<a href="${request.contextPath}/item/{{item.code}}" title="" target="_blank" >{{item.title}}</a>
							</div>
							<div class="price">
								<span class="sale">￥{{item.price}}</span>
								<span class="regular">￥{{item.oldPrice}}</span>
							</div>
						</div><!-- /.box-content -->
						<div class="box-bottom">
							<div class="btn-add-cart">
										<a name="a_add_cart" href="javascript:;" title="加入购物车"
												item_code="{{item.code}}" item_image="{{item.image}}"
												item_price="{{item.price}}" item_title="{{item.title}}">
												<img src="${request.contextPath}/search/images/icons/add-cart.png" alt="">加入购物车
										</a>
							</div>
							<div class="compare-wishlist">
								<span class="compare">
									<a href="javascript:;" title="">
										<img src="${request.contextPath}/search/images/icons/compare.png" alt="">比较
									</a>
								</span>
								<span class="wishlist">
									<a href="javascript:;" title="">
										<img src="${request.contextPath}/search/images/icons/wishlist.png" alt="">收藏
									</a>
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		{{/each}}
</script>

<script id="item_template_2" type="text/html">
		{{each $data as item i}}
			<div class="product-box style3">
				<div class="imagebox style1 v3">
					<div class="box-image">
						<a href="${request.contextPath}/item/{{item.code}}" title="" target="_blank">
							<img src="${nginxImage}{{item.image}}" alt="">
						</a>
					</div>
					<div class="box-content">
						<div class="cat-name">
							<a href="javascript:;" title="">￥{{item.categoryName}}</a>
						</div>
						<div class="product-name">
							<a href="${request.contextPath}/item/{{item.code}}" title="" target="_blank">￥{{item.title}}</a>
						</div>
						<div class="info">
							<p>
								{{item.detail}}
							</p>
						</div>
					</div>
					<div class="box-price">
						<div class="price">
							<span class="regular">￥{{item.oldPrice}}</span>
							<span class="sale">￥{{item.price}}</span>
						</div>
						<div class="btn-add-cart">
							<a href="javascript:;" title="">
								<img src="${request.contextPath}/search/images/icons/add-cart.png" alt="">加入购物车
							</a>
						</div>
						<div class="compare-wishlist">
							<a href="javascript:;" class="compare" title="">
								<img src="${request.contextPath}/search/images/icons/compare.png" alt="">比较
							</a>
							<a href="javascript:;" class="wishlist" title="">
								<img src="${request.contextPath}/search/images/icons/wishlist.png" alt="">收藏
							</a>
						</div>
					</div>
				</div>
			</div>
		{{/each}}
</script>


<script>
$(function(){
	
	$("#select_popularity").change(function(){
		getItemsBySolr();
	});	
	$("#select_page_showed").change(function(){
		getItemsBySolr();
	});	
	
	getItemsBySolr();
	
});


function getItemsBySolr(pageno){
	
	var pn = pageno||1 , field = "" , order = "" ;
	var limit = $("#select_page_showed").val();
	
	var select_popularity = $("#select_popularity").val();
	if(select_popularity == 1){
		//时间倒叙
		field = "created" ;
		order = "desc" ;
	}else if(select_popularity == 2){
		//时间正叙
		field = "created" ;
		order = "asc" ;
	}else if(select_popularity == 3){
		//价格倒叙
		field = "price" ;
		order = "desc" ;
	}else if(select_popularity == 4){
		//价格正叙
		field = "price" ;
		order = "asc" ;
	}
	
	$.ajax({
		contentType: 'application/x-www-form-urlencoded',
		url: '${request.contextPath}/search/getItemPage',
		method: 'post',
		data:{
			limit : limit
			, pn : pn
			,field : field
			,order : order
			,priceFrom : $("#priceFrom").val()
			,priceTo : $("#priceTo").val() 
			,category : ${parameter.cid!0}
			,categoryFid : ${parameter.category!0}
			,title : '${parameter.search!""}'
		},
		success:function(ret){
			if(ret.status==200 && ret.data && ret.data.total>0){
				
				$("#item_container_1").html(template('item_template_1', ret.data.list));
				$("#item_container_2").html(template('item_template_2', ret.data.list));
				
				//添加商品到购物车
	        	$("a[name='a_add_cart']").click(function(){
	        		
	        		var arr = [] ;
	            	var _cart = getCookie("_cart");
	            	if(_cart){
	            		_cart = Base64.decode(_cart);
	        			arr = $.parseJSON(_cart);
	        			var item_count = 0 , item_price = 0 ;
	        			$(arr).each(function(i , o){
	        				item_count += (o.count*1) ;
	        				item_price += (o.count * o.item_price);
	        			});
	        			$("#span_cart_itemcount").text(item_count).show();
	        			$("#span_cart_itemprice").text("￥"+item_price).show();
	            	}else{
	            		$("#span_cart_itemcount").text('').hide();
	            	}
	            	
	        		var item_code = $(this).attr("item_code") ;
	        		var item_title = $(this).attr("item_title") ;
	        		var item_price = $(this).attr("item_price") ;
	        		var item_image = $(this).attr("item_image") ;
	        		
	        		var itemNotInCart = true ;
	    			$(arr).each(function(i , o){
	    				if(item_code == o.item_code){
	    					//已经在购物车里面
	    					arr.splice(i , 1);
	    					arr.push({'item_code':item_code , 'item_title':item_title , 'item_price':item_price , 'item_image':item_image,'count':o.count*1+1});
	    					itemNotInCart = false ;
	    				}
	    			});
	    			//如果不在购物车里面
	    			if(itemNotInCart){
	    				arr.push({'item_code':item_code , 'item_title':item_title , 'item_price':item_price , 'item_image':item_image,'count':1});
	    			}
	    			
	    			setCookie("_cart" , Base64.encode(JSON.stringify(arr)));
	    			
	    			jqueryAlert({
						'icon'    : '${request.contextPath}/portal/alert/img/right.png',
						'content' : '已添加到购物车',
						'closeTime' : 2000,
					}).show();
	    			
	        		//显示购物车中的商品数量变化
	        		if(arr.length>0){
	        			var item_count = 0 , item_price = 0 ;
	        			$(arr).each(function(i , o){
	        				item_count += (o.count*1) ;
	        				item_price += (o.item_price*o.count) ;
	        			});
	        			$("#span_cart_itemcount").text(item_count).show();
	        			$("#span_cart_itemprice").text("￥"+item_price).show();
	        		}else{
	        			$("#span_cart_itemcount").text('').hide();
	        		}
	        		
				});
				
				if(pn==1){
						$(".pagination").jBootstrapPage({
				            pageSize : limit,
				            total : ret.data.total ,
				            maxPageButton:8,
				            onPageClicked: function(obj, pageIndex) {
				            	getItemsBySolr(pageIndex+1);
				            }
				        });
				}
				
			}
			
		},
		error:function(ret){
		}
	});
	
}
</script>